<!DOCTYPE html>
<html lang="en">
    <head>
        <title>地图导航</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <style rel="stylesheet" type="text/css">
            /*去除正文区域的内外间距：全屏*/
            body{ margin:0 auto; padding:0;}
            /*地图加载容器的大小*/
            #container{
                width: 100%;
                height: 100vh;
            }
        </style>
    </head>
    <body>
        <!--
            这里的html是鸿蒙web组件嵌入使用的。
            web组件不是浏览器，不能完美支持js脚本的弹窗。
            需要弹窗，也要传递给鸿蒙来处理。
        -->

        <!--地图呈现容器-->
        <div id="container"></div>

        <!--设置全局变量-->
        <script type="text/javascript">
            window._AMapSecurityConfig = {
              securityJsCode: "0db26d90216bbd7fd842411c8ac2f681",
            };
        </script>

        <!--加载官方地图脚本：请附加申请的key-->
        <script
           type="text/javascript"
           src="https://webapi.amap.com/maps?v=2.0&key=cc609a84238e178a4ecb230b12969c51"
        ></script>

        <!--自己的脚本-->
        <script type="text/javascript">

            //>>>>这里的代码默认执行
            //创建地图对象，进行初始化
            var map = new AMap.Map(
                "container",                         //加载显示的容器
                {
                    zoom: 18,                        //初始缩放比例
                    center: [121.474805,31.237220]  //初始中心点: [经度, 维度]
                }
            );


            //【方法】：设置定位
            function setLocation(lon, lat) {

                //重新设置地图的中心点
                map.setZoomAndCenter(20, [lon,lat]);

                //设置当前中心点的标记
                var marker = new AMap.Marker({
                    map,
                    icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
                    position: [lon,lat]
                });
                //加入到地图中
                map.add(marker);

                //地图新增插件能力：搜索
                map.plugin(['AMap.PlaceSearch'], function(){

                    //创建搜索功能对象，提供搜索的配置
                    var MSearch = new AMap.PlaceSearch({
                        map,                //对应的地图
                        pageSize: 4,        //每页条数
                        pageIndex: 1,       //页数
                        extensions: "base"  //扩展：基本信息
                    })

                    //为地图设置监听：搜索结果处理
                    AMap.Event.addListener(MSearch, "complete", (res)=>{
                        //调用鸿蒙方法，传回搜索结果
                        //网页中的网络传递，只能是字符串string
                        //只传递地址列表的数组的字符串给鸿蒙就可以了
                        window.swift.receiveNearPlace(JSON.stringify(res.poiList.pois))
                    })

                    //执行搜索：自动标记
                    MSearch.searchNearBy("停车场", [lon,lat])
                });


            }


            //当页面正式加载完毕
            window.onload = function(){
                //调用鸿蒙端，代理注册过来的函数
                window.swift.setCurrentLocation()
            }


        </script>
    </body>
</html>

